<template>
  <div class="w-full p-y-76px box-border bg-#fafafa">
    <div class="w-1100px m-[0_auto] bg-#fff">
      <el-tabs v-if="!showDetailFlag" v-model="activeName">
        <el-tab-pane
          class="w-830px c-#999 m-[0_auto] p-b-16px"
          label="视频投稿"
          name="1"
        >
          <el-upload
            drag
            v-model:file-list="files"
            :auto-upload="false"
            :on-change="handleChange(1)"
            multiple
          >
            <span class="iconfont icon-shangchuan text-90px"></span>
            <div class="el-upload__text m-b-20px">拖拽到此处也可上传</div>
            <el-button type="primary" class="w-200px h-44px"
              >上传视频</el-button
            >
            <p class="text-13px m-t-20px leading-24px">
              当前审核队列
              <span class="p-x-5px bg-#45818e c-#fff m-l-10px inline-block">
                快速
              </span>
            </p>
          </el-upload>

          <!-- bilibili投稿快捷方式 -->
          <div
            class="m-t-20px bg-[rgba(0,161,214,.05)] flex items-center justify-between p-20px"
          >
            <div class="flex items-center gap-20px">
              <img
                src="../../../assets/img/home/bilibili.svg"
                class="w-50px"
                alt=""
                srcset=""
              />
              <div>
                <p class="text-16px c-#212121 font-700">bilibili投稿快捷方式</p>
                <p class="text-12px c-#505050 m-t-8px">
                  保存bilibili投稿入口到桌面，界面更简单，加载更快速
                </p>
              </div>
            </div>
            <div
              class="w-90px h-30px leading-30px bg-#ff b b-solid b-#00aeec c-#00aeec text-13px text-center b-rd-4px cursor-pointer"
            >
              立即安装
            </div>
          </div>

          <!-- bilibili投稿快捷方式 -->
          <div
            class="m-t-20px bg-[rgba(0,161,214,.05)] flex items-center justify-between p-20px"
          >
            <div class="flex items-center gap-20px">
              <img
                src="../../../assets/img/home/bilibili.svg"
                class="w-50px"
                alt=""
                srcset=""
              />
              <div>
                <p class="text-16px c-#212121 font-700">必剪桌面端</p>
                <p class="text-12px c-#505050 m-t-8px">
                  一键字幕，海量素材，全能剪辑，支持一键投稿
                </p>
              </div>
            </div>
            <div
              class="w-90px h-30px leading-30px bg-#ff b b-solid b-#00aeec c-#00aeec text-13px text-center b-rd-4px cursor-pointer"
            >
              立即下载
            </div>
          </div>

          <!-- 提示 -->
          <div class="text-center c-#99a2aa text-12px m-t-20px">
            <p class="flex gap20px justify-center">
              <span class="cursor-pointer hover:c-#00a1d6">
                禁止发布的视频内容
              </span>
              <span class="cursor-pointer hover:c-#00a1d6">视频大小</span>
              <span class="cursor-pointer hover:c-#00a1d6">视频格式</span>
              <span class="cursor-pointer hover:c-#00a1d6">视频码率</span>
            </p>
            <p class="flex gap20px justify-center m-t-20px">
              <span>
                上传视频，即表示您已同意
                <span class="c-#00a1d6 cursor-pointer">哔哩哔哩使用协议</span>
                与
                <span class="c-#00a1d6 cursor-pointer">哔哩哔哩社区公约</span>
                ，请勿上传色情，反动等违法视频。
              </span>
            </p>
            <p class="flex gap20px justify-center m-t-20px">
              <span>第三方工具</span>
              <span class="cursor-pointer hover:underline hover:c-#00a1d6">
                小丸压制工具原版
              </span>
              <span class="cursor-pointer hover:underline hover:c-#00a1d6">
                小丸压制工具bilibili定制版
              </span>
            </p>
          </div>
        </el-tab-pane>
        <el-tab-pane label="短剧投稿" name="2">
          该功能正在开发中，请耐心等待~
        </el-tab-pane>
        <el-tab-pane label="专栏投稿" name="3">
          该功能正在开发中，请耐心等待~
        </el-tab-pane>
        <el-tab-pane label="互动视频投稿" name="4">
          该功能正在开发中，请耐心等待~
        </el-tab-pane>
        <el-tab-pane label="音频投稿" name="5">
          该功能正在开发中，请耐心等待~
        </el-tab-pane>
        <el-tab-pane label="贴纸投稿" name="6">
          该功能正在开发中，请耐心等待~
        </el-tab-pane>
        <el-tab-pane label="视频素材投稿" name="7">
          该功能正在开发中，请耐心等待~
        </el-tab-pane>
      </el-tabs>
      <Video
        v-if="showDetailFlag && activeName === '1'"
        v-model:files="files"
      ></Video>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { UploadUserFile, UploadFile, UploadFiles } from "element-plus";
import Video from "@/views/createCenter/submit/video/index.vue";
import { ref } from "vue";

// 激活的tab名称
const activeName = ref("1");

const showDetailFlag = ref(false); // 是否显示详情

// 文件上传列表
const files = ref<UploadUserFile[]>([]);

const handleChange = (uploadType: number) => {
  return (file: UploadFile, fileList: UploadFiles) => {
    showDetailFlag.value = true; // 显示详情
    files.value = [...fileList];
  };
};
</script>

<style scoped>
::v-deep(.el-tabs__nav) {
  height: 64px;
  margin-left: 20px;
}

::v-deep(.el-tabs__item) {
  font-size: 16px;
  color: #505050;
  margin: auto;
}
::v-deep(.el-tabs__item.is-active, .el-tabs__item:hover) {
  color: #00a1d6;
  font-weight: 800;
}
::v-deep(.el-tabs__active-bar) {
  color: #00a1d6;
  border-bottom: 3px solid #00a1d6;
}
::v-deep(.el-tabs__nav-wrap:after) {
  height: 1px;
}
</style>
